<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.app{
				width: 100%;
				height: 800px;
				margin: 0 auto;
				text-align: center;
			}
			
			button{
				margin-bottom: 10px;
			}
			
			.app .main{
				border: 10px solid black;
				width: 70%;
				height: 700px;
				margin: 0 auto;
				position: relative;
			}
			
			.app .main .snake{
				width: 10px;
				height: 10px;
				background: red;
				position: absolute;
				left: 0;
				top: 0;
			}
			
			.app .main .snake{
				width: 10px;
				height: 10px;
				background: green;
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
		
		<script>
			window.onload = function()
			{
				let btn = document.querySelector('button');
				let main = document.querySelector('.main');
				
				function init(snake){
					snake.className = 'snake';
					main.appendChild(snake);
					btn.disabled = true;
				}
				
				btn.onclick = function()
				{
					let snake = document.createElement('div');
					init(snake);
					let timer;
					let barriers = [];
					
					for(let i = 0; i < 5; i++)
					{
						
						barrier.style.left = Math.random()
					}
					
					
					window.setInterval(function(){
						window.onkeyup = function(event)
						{
							switch(event.key)
							{
								case 'w':
									clearInterval(timer);
									timer = setInterval(function(){
										snake.style.top = snake.offsetTop - 10 +'px';
									}, 100)
									break;
									
								case 'a':
									clearInterval(timer);
									timer = setInterval(function(){
										snake.style.left = snake.offsetLeft - 10 +'px';
									}, 100)
									break;
									
								case 's':
									clearInterval(timer);
									timer = setInterval(function(){
										snake.style.top = snake.offsetTop + 10 +'px';
									}, 100)
									break;
									
								case 'd':
									clearInterval(timer);
									timer = setInterval(function(){
										snake.style.left = snake.offsetLeft + 10 +'px';
									}, 100)
									break;
							}
						}
					}, 1000);
				}
			}
		</script>
	</head>
	<body>
		<div class="app">
			<button>开始游戏</button>
			<div class="main">
				
			</div>
		</div>
	</body>
</html>